<template>
    <view class="page-order pd-v-24">


        <view class="page-order__header">
            <u--form
                labelWidth="80"
                labelPosition="left"
                :model="params"
            >
                <view class="border8 pd-l-24 bg-white mr-t-20">
                    <u-form-item
                        label="门店名称"
                        prop="storeName"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="params.storeName"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入门店名称"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="订单号"
                        prop="orderNumber"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="params.orderNumber"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入订单号"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="订单时间"
                        prop="timeRange"
                        borderBottom
                        @click="showDatePicker"
                    >
                        <u--input
                            v-model.trim="params.timeRange"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请选择订单时间"
                            suffixIcon="calendar"
                            readonly
                            :suffixIconStyle="{marginRight:'12rpx',fontSize:'50rpx'}"
                        ></u--input>
                    </u-form-item>
                </view>
            </u--form>
            <u-tabs lineColor="#35BE65" :list="tabList" @change="tabChange" itemStyle="padding:26rpx 64rpx; "></u-tabs>
        </view>
          
        
        <view class="page-order__body">
          <view class="pd-v-24 pd-h-24 border8 bg-white mr-t-16" v-for="(orderItem,orderIndex) in list" :key="'order'+orderIndex" >
                <view class="flex mr-b-32 flex-center">
                    <view class="flex-1 font26 lh-28 color-default">
                        订单编号：{{orderItem.orderNumber}}
                    </view>
                    <view v-if="orderItem.status == 1" class="pd-h-8 pd-v-16 border-main border8 font20 lh-28 color-main">
                        正在充电
                    </view>

                    <view v-else-if="orderItem.status == 2" class="pd-h-8 pd-v-16 color-info border8 font20 lh-28 bg-default">
                        充电完成
                    </view>
                      
                </view>

                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        门店名称
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.storeName}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        设备信息
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                       {{orderItem.deviceInfo}} {{orderItem.phoneNumber ? '('+orderItem.phoneNumber+')' : ''}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        开始时间
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.startTime || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        结束时间
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.endTime || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        充电时长
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.chargingDuration ? minuteToTime(orderItem.chargingDuration) : '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        充电电量
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.chargingCapacity || '-'}}
                    </view>
                </view>
                <view class="flex mr-b-20">
                    <view class="font24 lh-28 color-info mr-r-36">
                        实付金额
                    </view>
                    <view class="flex-1 font24 lh-28 color-default">
                        {{orderItem.payAmount || '-'}}
                    </view>
                </view>
                  
                  
            </view>
              
        </view>
          

        <u-calendar 
            mode="range"
            :defaultDate="calendar.defaultDate"
            :maxDate="calendar.maxDate"
            :minDate="calendar.minDate"
            :monthNum="calendar.monthNum" 
            :show="show" @close="show = false;" @confirm="timeConfirm"></u-calendar>

    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app';


import { orderList  } from '@/api/proxy.js'

const store = useStore();
const tabList = ref([
    { name: '全部', value: '' },
    { name: '进行中', value: 1 },
    { name: '已完成', value: 2 },
])


const params = ref({
    storeName: '',
    orderNumber: '',
    timeRange:'',
    pageSize:10,
    pageNum:1,
    status:'',
    searchStartTime:undefined,
    searchEndTime:undefined
});

const total = ref(0)
const list = ref([])
const show = ref(false);
const timer = ref(null)
const calendar = ref({
    minDate: '',
    maxDate: '',
    defaultDate: '',
    monthNum: 13,
})


onShow(() => {
    
})

onLoad(() => {
    getOrderList()
    chooseTimed()
    

})


const chooseTimed = () => {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month <= 9) {
    month = '0' + month;
    }
    if (day <= 9) {
    day = '0' + day;
    }
    let minyear = year - 1;
    calendar.value.minDate = minyear + '-' + month + '-' + day;
    calendar.value.maxDate = year + '-' + month + '-' + day;
    calendar.value.defaultDate = year + '-' + month + '-' + day;
}

const showDatePicker = () => {
    console.log('showDatePicker');
    show.value = true;
};
const tabChange = (item) => {
    console.log(item);
    params.value.status = item.value
    params.value.pageNum = 1
    list.value = []
    getOrderList()
}

const search = () => {
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
        
        params.value.pageNum = 1
        list.value = []
        getOrderList()
    },1000)
}

const timeConfirm = (e) => {
    console.log(e,'')
    params.value.timeRange = e[0]+'~'+e[e.length-1]
    params.value.pageNum = 1
    params.value.searchStartTime = e[0] + ' 00:00:00'
    params.value.searchEndTime = e[e.length-1] + ' 23:59:59'
    list.value = []
    show.value = false;
    getOrderList()
};

const getOrderList = () => {
    uni.showLoading({
        title:'加载中...',
        mask:true
    })
    orderList(params.value).then(res => {
        uni.hideLoading()
        if(res.code == 200) {
            list.value = [...list.value,...res.rows]
            total.value = res.total
        }
    }).catch(err => {
        uni.hideLoading()

        console.log(err)
    })
}

onReachBottom(() => {
    if(list.value.length >= total.value) return
    params.value.pageNum++
    getOrderList()
}) 

const minuteToTime = (minutes) => {
  var hours = Math.floor(minutes / 60);
  if(hours < 1) {
    return `${minutes}分钟`;
  } else {
    var remainingMinutes = minutes - (hours * 60);
    return hours + "小时" + remainingMinutes + "分钟";
  }
  
}

</script>

<style scoped lang="scss">
.page-order {
    
    background:#F7F7F7;
    min-height:100vh;
    padding-bottom:360rpx;
}
</style>
